<template>
  <div class="wrap">
    <div class="search">
      <div class="mgb10">
        <user-check-box
          v-model="queryParams.userIds"
          v-loading="loading"
          @change="changeOption"
          @apiUserFinish="changeOption()"
          :filter-stop="true"></user-check-box>
      </div>
      <div class="mgb10">
        <diy-date v-model="queryParams.times" @change="changeOption"></diy-date>
      </div>
    </div>
    <div class="header">
      <div class="left">
        <el-radio-group v-model="queryParams.status" class="mgr20 mgb10" @change="changeOption">
          <el-radio-button style="margin-bottom: 3px" label="">{{$t('data.all statements')}}</el-radio-button>
          <el-radio-button style="margin-bottom: 3px" :label="1">{{$t('data.settled')}}</el-radio-button>
          <el-radio-button style="margin-bottom: 3px" :label="0">{{$t('data.unsettled')}}</el-radio-button>
        </el-radio-group>
      </div>

      <div class="right">
        <div style="display: inline-block;margin-right: 20px;width: 320px">
          <el-input
            size="small"
            style="width: 250px; margin-right: 10px; margin-bottom: 10px"
            v-model="queryParams.keyword"
            :placeholder="$t('common.Search for store or username')"
            @keyup.enter.native="changeOption(true)"
            clearable @clear="changeOption(false, 'clear')"></el-input>
          <el-button size="small" type="primary" @click="changeOption(true)">{{$t('common.search')}}</el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="data"
        :border="true"
        v-loading="loading"
        stripe
        @sort-change="handleSortChange"
        v-tableHeight="{bottomOffset: 80}"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          prop="userAccount"
          :label="$t('table.Settlement user')"
          align="center"
          width="150"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="accountList"
          :label="$t('table.Settlement store')"
          align="center"
          width="150"
        >
          <!--<template slot-scope="{row}">-->
          <!--  {{getAccountName(row.accountList)}}-->
          <!--</template>-->

          <template slot-scope="{row}">

            <el-tooltip class="item" effect="dark" placement="top-end">
              <div slot="content">
                <p
                  v-for="accountItem in row.accountList"
                  :key="accountItem.accountId"
                >
                  <!--<diy-link @click="jumpUserInfo(row)">{{accountItem.nickname}}</diy-link>-->
                  {{accountItem.nickname}}
                </p>
              </div>
              <div>{{ row.accountList.length }}</div>
            </el-tooltip>

          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          :label="$t('table.Settlement time')"
          align="center"
          min-width="200"
        >
          <template slot-scope="{row}">
            {{row.startDate}} - {{row.endDate}}
          </template>
        </el-table-column>
        <el-table-column
          prop="totalSettleOrderNum"
          :label="$t('table.Total number of stickers')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="totalStickerFee"
          :label="$t('table.Total sticker fee')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="totalShipmentNum"
          :label="$t('table.总货件单数')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="totalShipmentFee"
          :label="$t('table.总理货费用（元）')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="totalWorkNum"
          :label="$t('table.总工单数')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="totalBigMiddleFee"
          :label="$t('table.总大货中转费用（元）')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="totalStorageFee"
          :label="$t('table.Total storage cost')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>


        <el-table-column
          prop="totalFee"
          :label="$t('table.Summary of expenses')"
          align="center"
          min-width="150"
          sortable="custom"
          :sort-orders="sortOrders"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('table.status')"
          align="center"
          min-width="100"
        >
          <template slot-scope="{row}">
            {{row.status === 0 ? $t('data.unsettled') : $t('data.settled')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          :label="$t('table.operate')"
          align="left"
          width="350"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-button @click="jumpInfo(row)" class="mgb10" type="view">{{ $t('common.view') }}</el-button>
            <el-button @click="download(row)" class="mgb10" :loading="downloadLoading" type="primary">{{ $t('common.download') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import {getPaymentList, getPaymentPdf} from "@/api/statistics";
import {getTargetDate, getTargetTimezone} from "@/utils/common";

export default {
  name: "settlementList",
  components: {DiyDate, UserCheckBox},
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        status: '',
        times: [],
        userIds: [-1],
        keyword: '',
      },
      total: 0,
      data: [

      ],
      loading: false,
      downloadLoading: false,
      is_search: false,
      sortOrders: ['descending', 'ascending', null],
    }
  },
  created() {
    // const end = getTargetDate(getTargetTimezone());
    // const start = getTargetDate(getTargetTimezone());
    // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    //
    // const startDate = this.formatDate(start)
    // const endDate = this.formatDate(end)
    // this.queryParams.times = [startDate,endDate]
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods: {
    getData(){
      this.loading = true
      getPaymentList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.total = res.info.total
        })
    },
    getAccountName(accountList){
      let name = []
      accountList.forEach(item=>{
        name.push(item.showName)
      })
      return name.join('、')
    },
    jumpInfo(row){
      this.$router.push({
        name: 'settlementInfo',
        query: {
          id: row.id
        }
      })
    },
    // 下载
    download(row){
      this.downloadLoading = true
      getPaymentPdf(row.id)
        .then(res=>{
          this.downloadLoading = false
          if(res.error === 0){
            window.open(res.data.fileUrl,"_blank");
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    changeOption(is_search = false, type = ''){
      if (is_search == true) {
        //判断是否使用过搜索按钮
        this.is_search = true
      }
      if (type == 'clear') {
        if (this.is_search == false) {
          return
        } else {
          this.is_search = false
        }
      }

      this.queryParams.page = 1;
      this.getData()
    },
    //排序
    handleSortChange(column){
      this.queryParams.orderBy = ''
      this.queryParams.orderField = ''
      if(column.order){
        this.queryParams.orderBy = column.order
        this.queryParams.orderField = column.prop
        if (column.prop == 'totalSettleOrderNum') {
          this.queryParams.orderField = 'total_settle_order_num'
        } else if (column.prop == 'totalStickerFee') {
          this.queryParams.orderField = 'total_sticker_fee'
        } else if (column.prop == 'totalSpStickerPrice') {
          this.queryParams.orderField = 'total_sp_sticker_price'
        } else if (column.prop == 'totalStickerAppend') {
          this.queryParams.orderField = 'total_sticker_append'
        } else if (column.prop == 'totalLogisticTypePrice') {
          this.queryParams.orderField = 'total_logistic_type_price'
        } else if (column.prop == 'totalPackagePrice') {
          this.queryParams.orderField = 'total_package_price'
        } else if (column.prop == 'totalStorageFee') {
          this.queryParams.orderField = 'total_storage_fee'
        } else if (column.prop == 'totalFee') {
          this.queryParams.orderField = 'total_fee'
        }
      }
      this.queryParams.page = 1;
      this.getData()
    },
  }

}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
